<template>
  <div class="layout" style="background-color: #0f1325">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo"><Icon type="md-globe" />形态管控系统</div>
          <div class="layout-nav">
            <!--                        <MenuItem name="1" @click.native="toRedline">-->
            <!--                            <Icon type="ios-navigate"></Icon>-->
            <!--                            生态保护红线-->
            <!--                        </MenuItem>-->
            <!--                        <MenuItem name="2" @click.native="toMigration">-->
            <!--                            <Icon type="ios-map-outline" />-->
            <!--                            模拟迁徙图-->
            <!--                        </MenuItem>-->
            <!--                        <MenuItem name="3" @click.native="toVisual">-->
            <!--                            <Icon type="ios-stats-outline" />-->
            <!--                            可视化图-->
            <!--                        </MenuItem>-->
            <MenuItem name="4" to="/views/newSrc/newSystem">
              <Icon type="ios-log-out" />
              退出
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Layout :style="{minHeight: 'calc(100vh-60px)'}">
        <Sider collapsible :collapsed-width="78" v-model="isCollapsed" style="position: fixed; height: calc(100vh - 60px);overflow: auto">
          <Menu
            ref="leftmenu"
            @on-select="isCollapsed=false"
            @on-open-change="isCollapsed=false"
            :active-name="activeName" theme="dark"
            :open-names="opennames"
            width="auto"
            :class="menuitemClasses">
            <MenuItem name="0-1" to="/views/newSrc/newSystem/formControl">
              <Icon type="ios-book-outline" />
              <span>形态管控</span>
            </MenuItem>
            <Submenu name="1">
              <template slot="title">
                <Icon type="md-globe" />
                <span>管控对象</span>
              </template>
              <!--                            <MenuItem name="1-1"  to="/decision/ecoFunction/ecoRisk">生态风险图</MenuItem>-->
              <Submenu name="1-1">
                <template slot="title">
                  <Icon type="ios-analytics"></Icon>
                  <span>河流</span>
                </template>
                <!--                            <MenuItem name="1-1"  to="/decision/ecoFunction/ecoRisk">生态风险图</MenuItem>-->
                <MenuItem name="1-1-1" to="/views/newSrc/newSystem/formControl/controlObject/gan">淦河</MenuItem>
                <MenuItem name="1-1-2" to="/views/newSrc/newSystem/formControl/controlObject/jinshui">金水河</MenuItem>
              </Submenu>
              <Submenu name="1-2">
                <template slot="title">
                  <Icon type="ios-analytics-outline"></Icon>
                  <span>湖泊</span>
                </template>
                <!--                            <MenuItem name="1-1"  to="/decision/ecoFunction/ecoRisk">生态风险图</MenuItem>-->
                <Submenu name="1-2-1">
                  <template slot="title">
                    <span>斧头湖</span>
                  </template>
                  <!--                            <MenuItem name="1-1"  to="/decision/ecoFunction/ecoRisk">生态风险图</MenuItem>-->
                  <MenuItem name="1-2-1-1" to="/views/newSrc/newSystem/formControl/controlObject/futouProtect">保护区</MenuItem>
                  <MenuItem name="1-2-1-2" to="/views/newSrc/newSystem/formControl/controlObject/futouControl">控制区</MenuItem>
                </Submenu>
                <Submenu name="1-2-2">
                  <template slot="title">
                    <span>鲁湖</span>
                  </template>
                  <!--                            <MenuItem name="1-1"  to="/decision/ecoFunction/ecoRisk">生态风险图</MenuItem>-->
                  <MenuItem name="1-2-2-1" to="/views/newSrc/newSystem/formControl/controlObject/luProtect">保护区</MenuItem>
                  <MenuItem name="1-2-2-2" to="/views/newSrc/newSystem/formControl/controlObject/luControl">控制区</MenuItem>
                </Submenu>
                <Submenu name="1-2-3">
                  <template slot="title">
                    <span>西凉湖</span>
                  </template>
                  <!--                            <MenuItem name="1-1"  to="/decision/ecoFunction/ecoRisk">生态风险图</MenuItem>-->
                  <MenuItem name="1-2-3-1" to="/views/newSrc/newSystem/formControl/controlObject/xiliangProtect">保护区</MenuItem>
                  <MenuItem name="1-2-3-2" to="/views/newSrc/newSystem/formControl/controlObject/xiliangControl">控制区</MenuItem>
                </Submenu>
              </Submenu>
              <Submenu name="1-3">
                <template slot="title">
                  <Icon type="ios-rainy"></Icon>
                  <span>水库</span>
                </template>
                <!--                            <MenuItem name="1-1"  to="/decision/ecoFunction/ecoRisk">生态风险图</MenuItem>-->
                <MenuItem name="1-2-1" to="/views/newSrc/newSystem/formControl/controlObject/nanchuan">南川水库</MenuItem>
                <MenuItem name="1-2-2" to="/views/newSrc/newSystem/formControl/controlObject/simenlou">四门楼水库</MenuItem>
                <MenuItem name="1-2-3" to="/views/newSrc/newSystem/formControl/controlObject/mingshuiquan">鸣水泉水库</MenuItem>
              </Submenu>
            </Submenu>
            <Submenu name="2">
              <template slot="title">
                <Icon type="ios-water-outline" />
                <span>管控技术</span>
              </template>
              <MenuItem name="2-1" to="/views/newSrc/newSystem/formControl/controlTech/techLine">技术路线</MenuItem>
              <!--                            <MenuItem name="2-2" to="/decision/ecology/ecofunction">生态功能评价</MenuItem>-->
              <!--                            <MenuItem name="2-3" to="/decision/ecology/cityeco">城市生态评价</MenuItem>-->
              <!--                            <MenuItem name="2-4" to="/decision/ecology/naturalreserve">自然保护区评价</MenuItem>-->
              <MenuItem name="2-2" to="/views/newSrc/newSystem/formControl/controlTech/disturbance">扰动识别示例</MenuItem>
            </Submenu>
            <MenuItem name="3-1" to="/views/newSrc/newSystem/formControl/controlTech/dynamic">
              <Icon type="ios-videocam"></Icon>
              <span>动态识别</span>
            </MenuItem>
            <!--                        <Submenu name="3">-->
            <!--                            <template slot="title">-->
            <!--                                <Icon type="ios-list-box-outline" />-->
            <!--                                <span>数据展示</span>-->
            <!--                            </template>-->
            <!--                            <MenuItem name="3-1"  to="/decision/datadisplay/birds">鸟类数据展示</MenuItem>-->
            <!--                            <MenuItem name="3-2"  to="/decision/datadisplay/gazelle">普氏原羚数据展示</MenuItem>-->
            <!--                        </Submenu>-->
          </Menu>
        </Sider>
        <Layout :style="{padding: '0 ',marginLeft: '201px'}">
          <Breadcrumb  style="padding:15px ;background-color: #2D8CF0">
            <BreadcrumbItem to="/views/newSrc/newSystem">
              首页
            </BreadcrumbItem>
            <BreadcrumbItem to="/" v-if="menu1">
              {{menu1}}
            </BreadcrumbItem>
            <BreadcrumbItem>
              {{menu2}}
            </BreadcrumbItem>
          </Breadcrumb>
          <router-view/>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'Decision',
  components: {},
  data(){
    return {
      opennames:['1'],
      isCollapsed: false,
      activeName:'',
      menu1:"",
      menu2:"",
    };
  },
  methods:{
    toMigration(){
      let Migrationurl =this.$router.resolve(
        {
          path:"/decision/Migration",
        }
      );
      window.open(Migrationurl.href,'1_blank')
    },
    toRedline(){
      let Redlineurl =this.$router.resolve(
        {
          path:"/decision/Redline",
        }
      );
      window.open(Redlineurl.href,'2_blank')
    },
    toVisual(){
      let Visualurl =this.$router.resolve(
        {
          path:"/decision/Visual",
        }
      );
      window.open(Visualurl.href,'3_blank')
    }
  },

  created(){
    this.menu1 = this.$route.meta.parentName;
    this.menu2 = this.$route.meta.title;

    if (this.$route.meta && this.$route.meta.order) {
      this.activeName = this.$route.meta.order;
      this.opennames.push(this.$route.meta.order.split('-')[0]);
    }

  },
  watch:{
    $route(val){
      console.log(val)
      this.menu1 = val.meta.parentName;
      this.menu2 = val.meta.title;
    },
  },
  computed: {
    menuitemClasses: function () {
      return [
        'menu-item',
        this.isCollapsed ? 'collapsed-menu' : ''
      ]
    }
  }

}
</script>
<style >
::-webkit-scrollbar {
  width: 6px;
  background-color: #d8d8d8;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius:10px;
}
.ivu-menu-dark {
  background: #001529;
}
::-webkit-scrollbar-thumb {
  background-color: #bfc1c4;
}
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
.ivu-layout-sider-trigger{
  display: none;
}
.layout{
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
.layout-logo{
  color: #fff;
  height: 30px;
  line-height: 30px;
  font-size: 25px;
  /*background: #17233d;*/
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav{
  width: 100px;
  margin: 0 auto;
  margin-right: 0px;
  color: #001529;
}
.layout-copy{
  text-align: center;
  padding: 10px 0 20px;
  color: #001529;
}
.layout-header{
  background: #001529;
}
.layout-con{
  height: 100%;
  width: 100%;
}
.ivu-layout-header{
  padding: 0 !important;
}
.menu-item span{
  display: inline-block;
  overflow: hidden;
  width: 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width .2s ease .2s;
}
.menu-item i{
  transform: translateX(0px);
  transition: font-size .2s ease, transform .2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.ivu-layout-sider-trigger {
  color: #001529;
}
.collapsed-menu span{
  width: 0px;
  transition: width .2s ease;
}
.collapsed-menu .ivu-icon-ios-arrow-down{
  display: none;
}
.collapsed-menu i{
  transform: translateX(5px);
  transition: font-size .2s ease .2s, transform .2s ease .2s;
  vertical-align: middle;
  font-size: 22px;

}
.ivu-breadcrumb > span:last-child,.ivu-breadcrumb a  {
  color: white;
}
</style>
